<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>引导页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<style>
			.item-logo {
				width: 100%;
				height: 100%;
			}
			/*点*/
			.mui-slider-indicator{
				bottom: 20px;
			}
			.mui-active{
				background-color: #0487D0 !important;
			}
			.mui-slider-indicator .mui-indicator {
			    display: inline-block;
			    width: 15px;
			    height: 15px;
			    margin: 1px 3px;
			    cursor: pointer;
			    border-radius: 50%;
			    background-color: #fff;
			    box-shadow:none;
			    border:1px solid #0487D0;
			    }
			    /*跳过*/
			  .animate{
			   	width: 50px;
			   	height: 50px;
			   	line-height: 50px;
			   	border-radius: 50%;
			   	color: #fff;
			   	font-size: 16px;
			   	text-align: center;
			   	background-color: rgba(0,0,0,.2);
			   	z-index: 9;
			   	position: absolute;
			   	top: 27px;
    			right: 17px;
			   }
		</style>
	</head>

	<body>
		
		<div class="animate" id='close'>跳过</div>
		
		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: #fff;">
			
			<div class="mui-slider-group">
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #fff">
					<img src="../../img/index1.png"/>
					</div>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #fff;">
					<img src="../../img/index2.png"/>
					</div>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item end">
					<div class="item-logo" style="background-color: #fff;">
					<img src="../../img/index3.png"/>
					</div>
				</div>
				
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js" ></script>
		<script>
			//是否首次进入
//			
			
			//索引
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
				var index = event.detail.slideNumber+1;
//				mui.toast(index);
				if(index==3){
				$('.end').on('swipeleft', function(event) {
					plus.storage.setItem("launchFlag", "true");
					mui.openWindow({
						url:'login.html',
						id:'firstlogin',
					})
				})
				}

			});
			
			
			//监听back
			var backButtonPress = 0;
			mui.back = function(event) {
			    backButtonPress++;
			    if(backButtonPress > 1) {
			        plus.runtime.quit();
			    } else {
			        plus.nativeUI.toast('再按一次退出应用');
			    }
			    setTimeout(function() {
			        backButtonPress = 0;
			    }, 1000);
			    return false;
			};

//			//跳过事件
			document.getElementById("close").addEventListener('tap', function(event) {
				plus.storage.setItem("launchFlag", "true");
				plus.navigator.setFullscreen(false);
				plus.webview.currentWebview().close();
			}, false); 
			
		</script>
	</body>

</html>